<template>
  <div class='gfb'>
    <div class="myinfo info-name">昵称：{{form.name}}</div>
    <div class="myinfo info-wechat">微信：{{form.wechat}}</div>
    <el-button class="btns" :plain="true" type="success" @click="dialogFormVisible = true">修改信息</el-button>
    <el-button class="btns" :plain="true" type="danger" @click="close()">注销登录</el-button>
    <br><br><hr><br>
    <div class="members">
      <div class="member" v-for="userObj in Chat.onlineUsers" @click="showWeChat(userObj)">
        <div class="header">
        </div>
        <div class="name">
          <div class='name-1'>{{userObj.UserName}}</div>
          <div class='name-2'>{{userObj.WeChat}}</div>
        </div>
      </div>
      <!-- 占位 -->
      <div class="member" v-for="i in 9">
      </div>
    </div>

    <el-dialog title="私人信息" :visible.sync="dialogTableVisible" class='table'>
      <el-table :data="gridData">
        <el-table-column property="name" label="群昵称" ></el-table-column>
        <el-table-column property="wechat" label="微信号" ></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="修改群内信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="昵称">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="form.wechat" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import Chat from '../api/client'
export default {
  data () {
    return {
      Chat: Chat,
      dialogTableVisible: false,
      dialogFormVisible: false,
      gridData: [{
        wechat: '',
        name: ''
      }],
      form: {
        name: '',
        id: '',
        wechat: 'NULL',
        fname: '',
        fweichat: ''
      }
    }
  },
  components: {
  },
  mounted () {
    if (localStorage.name) {
      this.form.name = localStorage.name
    }
    if (localStorage.wechat) {
      this.form.wechat = localStorage.wechat
    }
    if (localStorage.uid) {
      this.form.id = localStorage.uid
    }
  },
  methods: {
    close () {
      var _this = this
      this.$confirm('此操作将返回登录界面, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (localStorage) {
          localStorage.removeItem('name')
          localStorage.removeItem('uid')
          localStorage.removeItem('weichat')
        }
        console.log(Chat)
        _this.$router.push('/login')
        _this.Chat.logout()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    showWeChat (userObj) {
      this.dialogTableVisible = true
      this.gridData[0].wechat = this.form.wechat
      this.gridData[0].name = this.form.name
      console.log(userObj)
      this.fname = userObj.UserName
      this.fweichat = userObj.WeChat
      this.isShowF = true
    },
    save () {
      this.dialogFormVisible = false
      if (this.form.name !== '') {
        this.form.name = this.form.name.slice(0, 10)
      }
      if (localStorage) {
        localStorage.setItem('name', this.form.name)
        localStorage.setItem('wechat', this.form.wechat)
      }
      this.Chat.changeInfo()
      window.location.reload()
      // this.$router.push({path: '/room', query: {refresh: true}})
    }
  }
}
</script>
<style scoped>
.gfb{
  height:90%;
}
.members{
  height:50%;
  overflow-y:auto;
}
.member{
  overflow:hidden;
  padding:5px 10px;
}
.member .header{
  width:40px;height:40px;
  background:#3CAF36;
  border-radius:50%;
  -webkit-border-radius:50%;
  overflow:hidden;
  float:left;
}
.member .name{
  float:left;
  margin-left:10px;
  line-height:20px;
}
.member .name .name-1{
  font-size:16px;
  color:#333;
}
.member .name .name-2{
  font-size:12px;
  color:#999;
}
.myinfo{
  text-align:center;
  font-size:14px;
  padding:10px 0;
}
.info-name,.info-wechat{
  border-bottom:1px dashed #ccc;
}
.btns{
  margin: 20px 0 10px;
}
.f-info,.modify-box{
  text-align:center;
}
.modify-box{
  line-height:30px;
}
.modify-box input{
  line-height:30px;
  width:80%;
  padding:0 10px;
  border:0 none;
}
.modify-box .wechat{
  margin:10px 0 ;
}
.btn {
  display:block;
  cursor:pointer;
  margin:10px auto 0;
  width:80%;
  padding:0 10px;
}
.btn.g{
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
.btn.r{
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
.f-info .btn{
  line-height:2;
}
.f-info .name,
.f-info .wechat{
  line-height:2;
  margin:20px 0;
}
.f-info .name input,
.f-info .wechat input{
  line-height:2;
  border:0 none;
  padding:0 10px;
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
</style>
